<template>
	<view class="content">
		<view class="cbody">
			<home v-if="tabIndex==0"></home>
			<dmx v-if="tabIndex==1"></dmx>
			<business v-if="tabIndex==2"></business>
			<user v-if="tabIndex==3"></user>
		</view>
		<view>
			<view class="navbar">
				<view class="tab-item" :class="{'active':tabIndex==0}" @click="tabIndex=0">
					<image src="../../static/images/footer1.png" v-if="tabIndex == 0"></image>
					<image src="../../static/images/footer1w.png" v-else></image>
					<view :class="{'xuanzhong':tabIndex==0}">首页</view>
				</view>
				<view class="tab-item" :class="{'active':tabIndex==1}" @click="tabIndex=1">
					<image src="../../static/images/footer2.png" v-if="tabIndex == 1"></image>
					<image src="../../static/images/footer2w.png" v-else></image>
					<view :class="{'xuanzhong':tabIndex==1}">AI问答</view>
				</view>
				<view class="tab-item" :class="{'active':tabIndex==2}" @click="tabIndex=2">
					<image src="../../static/images/footer3.png" v-if="tabIndex == 2"></image>
					<image src="../../static/images/footer3w.png" v-else></image>
					<view :class="{'xuanzhong':tabIndex==2}">商家信息</view>
				</view>
				<view class="tab-item" :class="{'active':tabIndex==3}" @click="tabIndex=3">
					<image src="../../static/images/footer4.png" v-if="tabIndex == 3"></image>
					<image src="../../static/images/footer4w.png" v-else></image>
					<view :class="{'xuanzhong':tabIndex==3}">我的</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import home from '@/pages/home/index.vue';
	import dmx from '@/pages/dmx/index.vue';
	import business from '@/pages/business/index.vue';
	import user from '@/pages/user/index.vue';

	export default {
		async created() {
			await this.$onLaunched;
		},
		onLoad(options) {
			if (options.tabIndex) {
				this.tabIndex = options.tabIndex
			}
		},
		data() {
			return {
				tabIndex: 0,
			}
		},
		methods: {

		},
		watch: {
			tabIndex(val) {
				if (val == 0) {
					uni.setNavigationBarTitle({
						title: '首页'
					})
				} else if (val == 1) {
					uni.setNavigationBarTitle({
						title: 'AI问答'
					})
				} else if (val == 2) {
					uni.setNavigationBarTitle({
						title: '商家信息'
					})
				} else if (val == 3) {
					uni.setNavigationBarTitle({
						title: '我的'
					})
				}
			},
		},
		components: {
			home,
			dmx,
			business,
			user
		}
	}
</script>

<style lang="scss" scoped>
	.navbar {
		background-color: #242831;
		position: fixed;
		z-index: 99;
		bottom: 0;
		left: 0;
		display: flex;
		width: 100%;
		height: 98rpx;
		align-items: center;
		justify-content: space-around;
		box-shadow: inset 0px 0px 0.5px 0px rgba(77, 77, 77, 1);

		.tab-item {
			width: 33.3%;
			text-align: center;

			view {
				font-size: 20rpx;
				text-align: center;
				color: #CCCCCC;
				margin-bottom: 13rpx;
			}

			image {
				width: 44rpx;
				height: 44rpx;
				margin-top: 16rpx;
			}
		}

		.active {

			.xuanzhong {
				color: #EAC59F;
			}
		}
	}
</style>